Ce blog est encore en construction

Notes de la conférence Maitriser les fondamentaux du Web

• Conférence : DevFest Strasbourg 2024
• Speaker : Bertrand Delacrétaz
• Lien vers la video : Youtube
• Publié le : 14 Décembre 2024

Quelques mots sur la conférence et le talk

Le DevFest Strasbourg se décrit comme “La plus grande conférence technique du Grand Est destinée aux développeurs”.

Bertrand Delacrétaz est Principal Developer chez Adobe Suisse, et Former Board Member (pendant 14 ans !) chez Apache Software Foundation. Il se défini comme développeur généraliste, c’est à dire pas forcément capable de rentrer dans les détails de tous les sujets mais capable de parler avec les experts de tous ces sujets.

Dans cette conférence, il explique que la simplicité apparente du web n’exclut pas d’accorder de l’importance à différents sujets importants: sécurité, performance, design… Le plus important étant néanmoins de faire au plus simple.

Les fondamentaux du web

Comment ça fonctionne

Bertrand Delacrétaz part d’un constat: on pense souvent qu’un site internet c’est simple: du HTML, du CSS et un peu de Javascript. Le tout avec un côté client symbolisé par le navigateur et tout ce qu’il faut d’appels HTTP entre celui-ci et les serveurs.

Ce principe très simple est d’ailleurs ce qui contribué à l’essor du web.

Mais ces langages, issus de standards (W3C) sont en constante évolution. Pensez d’ailleurs à vous mettre à jour des dernières spécifications et faites attention à ne pas laisser l’utilisation des frameworks vous masquer les évolutions des langages, et des web APIs.

Le speaker introduit ensuite la notion de evergreen web (ndlr: définition du terme par le W3C), c’est à dire la capacité des navigateurs à se mettre à jour discrétement et régulièrement pour intégrer ces nouveautés. Fini les limitations d’utilisation de certains navigateurs parce que celui-ci ne supporte pas telle ou telle fonctionnalité. C’est beaucoup plus unifié désormais. Des sites permettent même d’avoir une vision de ces supports (par exemple: MDN, Can I Use).

Make it look good

Au coeur d’une interface attrayante on retrouve le CSS. Mais la sémantique doit elle rester la responsabilité du HTML. De plus, le CSS moderne permet d’aller de plus en plus loin dans la personnalisation, il faut en suivre les nouveautés sous peine de rester parfois dépendants de librairie externe sans savoir que le langage comporte désormais ce qu’il faut.

Quelques termes et concepts importants à connaître:

• Le responsive design permet d’adapter le site aux différents types de devices (mobile, desktop). En commençant en priorité par le mobile qui est le device le plus utilisé désormais.
• L’User Experience (UX) est toute aussi importante pour s’assurer que l’expérience de l’utilisateur lui permet de profiter du site.
• L’internationalisation permet de proposer une interface dans plusieurs langues.
• L’accessibilité aussi est nécessaire à prendre en compte pour proposer une expérience similaire pour tous types d’utilisateurs.

Images et Videos

Les images ça peut sembler simple à première vue: une balise image et un lien dedans.

En pratique on peut vouloir supporter plusieurs types de formats, des formats bitmap, vectoriel, du webp (qui contient plusieurs résolutions d’images).

La balise <picture> permet aussi d’indiquer au navigateur plusieurs images et formats à prendre dans un ordre de priorité selon ce qu’il est capable de supporter.

Concernant les videos, en principe on fonctionne surtout en streaming, en envoyant petit bout par petit bout. Cela permet aussi un côté adaptatif car un changement de type de connexion par exemple (haut-débit vers bas-débit) va se symboliser par l’envoi de paquets de plus basse qualité (l’image perd en qualité) plutôt qu’une perte d’accès.

NDLR: pour aller plus loin Guide des types et formats de fichiers d’images sur le MDN

Securité

Le hacking n’est plus réservé aux gros sites et aux grandes sociétés, tout type de site peut est concerné.

Quelques termes et concepts importants à connaître:

• CORS (cross-origin ressource sharing) qui n’est pas un soucis de sécurité en soi mais plutôt une réponse pour l’améliorer. Généralement un site se connecte à d’autres sites (un service d’hébergement d’images par exemple). On va utiliser les en-têtes HTTP pour configurer les autorisations d’accès au contenu d’autres sites via des directives dites CORS. Plus d’infos sur le MDN
• XSS (cross-site scripting) est un concept d’execution de script javascript malicieux saisi par le client (par exemple dans un formulaire). Il faut toujours nettoyer les données saisies par le client.
• CSRF (cross-site request forgery), va permettre d’introduire du code dans une page d’un site pour provoquer l’appel à ses propres scripts. Souvent utilisé pour récupérer des informations du client (cookies).
• Le DDOS (distribued denial of service), consiste à utiliser des ordinateurs vérolés pour executer des requêtes en masse sur un service dans le but de le rendre inopérable. Généralement l’utilisation d’un WAF (cloudflare ?) permet de limiter l’impact de ces attaques en limitant le traffic.
• L’Access control. Va souvent impliquer des outils et notions comme OAuth, Https (pour crypter la communication), des certificats (côté serveur) dont il faut controler la validité.

Performance

Pour mesurer la performance d’un site, on peut utiliser les Core Web Vitals et ses indicateurs. (ndlr: introduction à ces métriques sur le blog web.dev)

• Le LCP Largest Contentful Pain: temps pris par le plus grand élément de la page (ex: une image) pour être affiché
• le CLS Cumulative Layout Shift: est-ce que l’affichage des éléments provoquent de nombreux changements dans la page (déplacement temporaire, notamment en attendant la fin du chargement des données etc.)
• le INP Interaction to Next Paint: temps de réaction lorsque l’on effectue des actions sur la page

Le caching est un stockage intermédiaire permettant de servir des données statiques (pages, images etc.) rapidement aux clients. Le cache peut venir des serveurs applicatifs mais les navigateurs en fournissent aussi (relatif aux sites déjà visités). Les CDN (MDN) permettent de rapprocher (physiquement) le cache des utilisateurs (quelques acteurs: Akamai, Fastly, Cloudflare).

Le concept Lean and Mean concerne le contenu non nécessaire dans les contenus qu’on renvoie au client. On affiche en premier le HTML (essentiel), puis le CSS (nécessaire), ensuite le JavaScript (souvent facultatif). Il faut toujours penser au mode dégradé lors du développement et des tests.

Développement

La feedback loop est importante à maitriser car chaque étape (build, déploiement, tests...) contribue à ralentir le temps entre la conception et la production de fonctionnalité. Le mot-clé est simplicité (et frugalité).